<template>
  <div id="detail">
    <DetailNavBar class="detail-nav-bar" @NavitemClick="NavitemClick" ref="DetailNavBar"/>
    
    <Scroll class="wrapper-detail" ref="scroll" 
        @scrollcontent="scrollcontent" :isprobeType="3">
      <div class="content-detail">
        <SwiperDetail :topImages="topImages"/>
        <DetailBasicMessage :goods="goods"/>
        <DetailShopMessage :shopInfo="shop"/>
        <DetailGoodsImage :detailInfo="detailInfo" @imageLoadOk="imageLoadOk"/>
        <DetailComment ref="params" :params="params"/>
        <DetailCommentInfo ref="comment" :comment="comment"/>
        <RecommendList ref="recommend" :recommendList="recommendList"/>
      </div>
      
    </Scroll>
    <DetailBottomBar @addShopCar="addToShopCar"/>
    <!-- .native修饰符给组件的根元素添加点击事件 -->
    <BackTop  @click.native="backtopClick" v-show="isshowbacktop"/>
    
  </div>
  
</template>
<script>
import DetailNavBar from './childdetail/DetailNavBar'
import {getDetail,Goods,Shop,Comment,getRecommend} from '../../networks/detail'
import SwiperDetail from './childdetail/SwiperDetail'
import DetailBasicMessage from './childdetail/DetailBasicMessage'
import DetailShopMessage from './childdetail/DetailShopMessage'
import Scroll from '@/components/common/scroll/Scroll'
import DetailGoodsImage from './childdetail/DetailGoodsImage'
import DetailComment from './childdetail/DetailComment'
import DetailCommentInfo from './childdetail/DetailCommentInfo'
import RecommendList from './childdetail/DetailRecommend'
import DetailBottomBar from "./childdetail/DetailBottomBar"
import BackTop from "@/components/content/backtop/BackTop"

export default {
  name:"Detail",
  components:{
    DetailNavBar,
    SwiperDetail,
    DetailBasicMessage,
    DetailShopMessage,
    Scroll,
    DetailGoodsImage,
    DetailComment,
    DetailCommentInfo,
    RecommendList,
    DetailBottomBar,
    BackTop,
    
    
  },
  data(){
    return {
      iid:null,
      topImages:null,
      goods:{},
      shop:{},
      detailInfo:{},
      params:{},
      comment:{},
      recommendList:[],
      itemImageListener:null,
      themtopY:[0,1000,2000,3000],
      currentIndex:0,
      isshowbacktop:false,

    }
  },
    mounted() {
    const refresh= this.debounce(this.$refs.scroll.refresh,100);
    this.itemImageListener=()=>{
      //但是刷新频率太高，这里用防抖减少刷新频率
      refresh();
      
    }
      //监听图片加载事件 注意：在create里不能监听获取dom 和组件事件，很有可能是空
    this.$bus.$on("itemImgLoad",this.itemImageListener);
      //1没有数据拿不到offsetTop
      // this.themtopY=[];
      // this.themtopY.push(0);
      // this.themtopY.push(this.$refs.params.$el.offsetTop);
      // this.themtopY.push(this.$refs.comment.$el.offsetTop);
      // this.themtopY.push(this.$refs.recommend.$el.offsetTop);
          
      // console.log("ssssssssssssss",this.themtopY);
     
    
  },
  //离开时取消监听
  destroyed() {
    this.$bus.$off("itemImgLoad",this.itemImageListener);
  },
  methods: {
    //图片加载完成后，刷新并获取详情页的offsetTop
    imageLoadOk(){
      this.$refs.scroll.refresh();
      console.log("图片加载完成1");
      this.themtopY=[];
      this.themtopY.push(0);
      this.themtopY.push(this.$refs.params.$el.offsetTop);
      this.themtopY.push(this.$refs.comment.$el.offsetTop);
      this.themtopY.push(this.$refs.recommend.$el.offsetTop);
      this.themtopY=this.themtopY.map(function(value){
        return value-44;
      })
          
      console.log("ssssssssssssss",this.themtopY);
      console.log("图片加载完成2");
     
         
      

     
    },
       // 防抖动
    debounce(fn,delay){
      let timer=null;
      return function(...args){
        //注意这里的this最终会被vue实例调用，所以指向vue实例
        //如果有timer,清除，没有就加上
        if(timer) clearTimeout(timer);
        timer=setTimeout(()=>{
          //appy作用：1将settimeout里面的this-指向上衣级return function() 的this就是vue实例与fn window绑定,
          // 2 传递参数给fn调用
          fn.apply(this,args)
        },delay)

      }

    },
    //
    NavitemClick(index){
      console.log("nav",index);
      //滚动到对应位置
      this.$refs.scroll.scrollToTop(0,-this.themtopY[index],100);
    },
    scrollcontent(position){
      //获取滚动得y值
      
      const positionY= -position.y;
      //把y值和this.themtopY[0,a,b,c]作比较
      // 大于等于0小于a index=0 
      // 大于等于a小于b index=1
      //大于等于b小于c index=2
  
      //大于等于c index=3
      let length=this.themtopY.length;
      for(let i=0;i<length;i++){
        if(this.currentIndex!==i&&(i<length-1&& positionY>=this.themtopY[i]&&positionY<this.themtopY[i+1]||
        i===length-1&&positionY>=this.themtopY[i])){
          console.log(i);
          //获取滚动得距离对应得当前index
          this.currentIndex=i;
          //将index传给navbar
          this.$refs.DetailNavBar.currentIndex=this.currentIndex;
        }
       
      }
      

    },
     backtopClick:function(){
      //拿到scroll组件对象，然后拿到scroll滚动对象 
      //返回顶部
      this.$refs.scroll.scrollToTop(0,0,500);
    },
    scrollcontent:function(position){
      //判断backtop是否显示
      this.isshowbacktop=(-position.y)>1000;
      //判断tabcontrol是否fixed
      this.isfixed=(-position.y)>this.tabOffsetTop;
    },
    addToShopCar:function(){
      console.log("购物车");
      //获取添加到购物车的信息
      const product = {}
      product.image=this.topImages[0];
      product.title=this.goods.itemInfo;
      product.desc=this.goods.desc;
      product.price=this.goods.realPrice;
      product.iid=this.iid;
      product.count = 1;
      //添加商品到vuex
      // this.$store.commit("addProduct",product);
      this.$store.dispatch("addProduct",product).then(res=>{
        this.$toast.showToast(res,1000);
        // this.$toast.showToast("我是全局插件",1000)
      }).catch(err=>{console.log(err);});
      // this.$store.commit({
      //   type:"addProduct",
      //   product,
      // })
    }
  },
  created() {
   //保存iid,
   this.iid=this.$route.query.iid;
   
   //发送请求
   getDetail(this.iid).then(res=>{
     console.log(res);
     //分离轮播图片
     this.topImages=res.result.itemInfo.topImages;
     //获取商品信息,通过对象包装信息
     this.goods=new Goods(res.result.itemInfo,res.result.columns,res.result.shopInfo.services) 
     //获取商家信息
     this.shop=new Shop(res.result.shopInfo);
     //获取商品图片信息
     this.detailInfo=res.result.detailInfo;
     //获取商品参数信息
     this.params=new Comment(res.result.itemParams.info,res.result.itemParams.rule);
     //请求商品评论的信息
     if(res.result.rate.length!==0){
       console.log(res,"comment");
       this.comment=res.result.rate.list[0];
     }
     //2有了数据，会渲染dom,渲染完才会有数据
      // this.themtopY=[];
      // this.themtopY.push(0);
      // this.themtopY.push(this.$refs.params.$el.offsetTop);
      // this.themtopY.push(this.$refs.comment.$el.offsetTop);
      // this.themtopY.push(this.$refs.recommend.$el.offsetTop);
          
      // console.log("ssssssssssssss",this.themtopY);
      this.$nextTick(()=>{
        //跟图片加载有关，导致数据高度不对
        // this.themtopY=[];
        // this.themtopY.push(0);
        // this.themtopY.push(this.$refs.params.$el.offsetTop);
        // this.themtopY.push(this.$refs.comment.$el.offsetTop);
        // this.themtopY.push(this.$refs.recommend.$el.offsetTop);
            
        // console.log("ssssssssssssss",this.themtopY);
      })
     
   });
   getRecommend().then(res=>{
     console.log("推荐数据",res);
     this.recommendList=res.data.list;
     console.log("recommendlist",this.recommendList);
   })
  },
  updated() {
      // this.themtopY=[];
      // this.themtopY.push(0);
      // this.themtopY.push(this.$refs.params.$el.offsetTop);
      // this.themtopY.push(this.$refs.comment.$el.offsetTop);
      // this.themtopY.push(this.$refs.recommend.$el.offsetTop);
          
      // console.log("ssssssssssssss",this.themtopY);
  },
}

</script>
<style scoped>
#detail{
position: relative;
z-index: 9;
background-color: white;
height: 100vh;

}
.detail-nav-bar{
  position: relative;
  z-index: 9;
  background-color: white;
}
.wrapper{
height: calc(100% - 44px);

}
</style>